<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>写游记</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0,user-scalable=no">

    <link rel="stylesheet" href="../../resources/lib/bootstrap/bootstrap-3.3.7-dist/css/bootstrap.css">
    <link rel="stylesheet" href="../../resources/travel-note/css/note-write.css">
    <link rel="stylesheet" type="text/css" href="../../resources/index/css/style1.css">
    <script style="text/javascript" src="../../resources/lib/jQuery/jquery-3.1.1.js"></script>
    <script type="text/javascript" src="../../resources/index/js/index.js"></script>
    <script style="text/javascript" src="../../resources/lib/jQuery/jquery-3.1.1.js"></script>
    <script type="text/javascript" src="../../resources/travel-note/js/note-write.js"></script>
    <script type="text/javascript" src="../../resources/lib/bootstrap/bootstrap-3.3.7-dist/js/bootstrap.js"></script>
    <script style="text/javascript" src="../../resources/index/js/login-user-id.js"></script>
</head>
<body>
<div class="" style="background:#fff6f4;!important;z-index: 100;width:100%;margin-top: 0px;">
    <div class="col-md-2">
        <img style="height:68px;width: 100%" src="../../resources/index/img/logo.png" alt=""/>
    </div>
    <!-- 代码 开始 -->
    <div id="menu2" class="menu col-md-7">
        <ul>
            <li><a  href="../index/index.html">首 页</a ></li>
            <li><a href="../scenicSpotIntroduction/scenicSpotIntroduction.html">特色景点</a></li>
            <li><a href="../gourmetHotel/gourmetHotel.html">住宿餐饮</a></li>
            <li><a href="../tourRoute/tourRoute.html">旅游导览</a></li>
            <li><a href="../backstory/backstory.html">背景故事</a></li>
            <li><a href="../aboutUs/aboutUs.html">关于我们</a></li>
            <li><a href="../travel-note/travel-note.html">游记</a></li>
        </ul>
        <div class="cls"></div>
    </div>
    <!-- 代码 结束 -->


    <div class="col-md-3 col-sm-3 col-lg-3 col-xs-12">
        <div id="weather" onmouseover="weatherView()" onmouseout="weatherViewRemove()" style="z-index: 100;position: absolute">

            地点：<span id="currentCity"></span>
            当前日期：<span id="date"></span><br/>
            天气：
            <span id="today_weather" class="weahter"></span>
            <img id="today_day" src=""/>
            <img id="today_night" src=""/>
            <div class="nextDay">
                明天：
                <span id="tomorrow_date"></span><br/>
                <img id="tomorrow_day" src=""/>
                <img id="tomorrow_night" src=""/>
                <span id="tomorrow_weather" class="weahter"></span>
                <span id="tomorrow_temperature" class="weahter"></span>
            </div>
            <div class="nextDay">
                后天：
                <span id="tomorrowAfter_date"></span><br/>
                <img id="tomorrowAfter_day" src=""/>
                <img id="tomorrowAfter_night" src=""/>
                <span id="tomorrowAfter_weather" class="weahter"></span>
                <span id="tomorrowAfter_temperature" class="weahter"></span>
            </div>
        </div>
    </div>
</div>
<div style="width:100%;height: 240px; background:url('../../resources/personCenter/img/bg-con.png')">

</div>
<div class="col-md-10 col-md-offset-1 col-xs-12">
    <img id="user_avt" class="img-circle col-md-2 col-xs-4" style="margin-top: -50px;height: 120px;width: 150px" src="../../resources/travel-note/img/avt.jpg">
    <br/>
    <span id="user_email" class="glyphicon glyphicon-user col-xs-8" style="color: rgb(73, 75, 73); font-size: 21px;"> 158412147@qq.com</span>

</div>
<div class="col-md-8 col-md-offset-2 col-xs-12">
    <div class="col-md-6 col-md-offset-3 col-xs-12" style="text-align: center">
        <span>标题：</span> <input id="travel_title" type="text" maxlength="30" placeholder="请输入你的标题（30字）"/>
        <span>类型：</span> <select id="travel_type" name="">
        <option value=1>游玩</option>
        <option value=2>旅游攻略</option>
        <option value=3>美食</option>
        <option value=4>住宿</option>
    </select>
    </div>
    <div class="con col-md-12 col-xs-12">
    <textarea id="travel_content" class="col-md-12 col-xs-12">

    </textarea>
        <br/>

        <div class="col-md-12">


           <div>
               <span class="chose-pic">点击选择图片</span>
               <input id="file_input" type="file" value="000" onchange="previewFile()" style="z-index:1000; margin-top:10px;border-radius: 10px;opacity: 0">
               <input type="text" name="compressValue" id="compressValue" style="display:none;"/>

           </div>


        </div>


        <div class="col-md-10 col-md-offset-1 col-xs-12">
            <!--<img  class="col-md-6 col-xs-6" src="../../resources/travel-note/img/cont.jpg" alt=""/>-->
            <!--<img  class="col-md-6 col-xs-6" src="../../resources/travel-note/img/cont.jpg" alt=""/>-->
        </div>
        <input type="button" onclick="upImgAndReportTravels()" class="btn-commit" value="发布"/>

    </div>
</div>
<div class="col-md-12" style="text-align: center;height: 80px;font-size: 18px;background: pink">
    <div style="margin-top: 30px">
        <span>&copy;四川旅游学院信息与工程学院2017-2018&nbsp;|&nbsp; 地址：四川省成都市龙泉驿区红岭路459号&nbsp; | &nbsp;邮编：610100 </span>

    </div>

</div>
</body>
<script type="text/javascript">


    //value数组放图片64位编码
    var value = new Array;
    var compressValue = document.getElementById('compressValue');
    var index = 0;
    var reader = new FileReader();
    //显示预览图片
    function previewFile() {
        index = parseInt(index, 10) + 1;
//        $("#file_input").before(" <input type='text' name='compressValue' class='compressValue' id='compressValue' style='display:none;'/>")

        $("#file_input").after(" <img id='img_" + index + "' class='img col-md-6' style='margin-top:30px' src='' height='300' width='400' alt='Image preview...'/>");
        var preview = document.getElementById("img_" + index + "");

        var file = document.querySelector('input[type=file]').files[0];
        reader.onloadend = function () {
            preview.src = reader.result;
        };
        if (file) {
            reader.readAsDataURL(file);
            $("#default_span").remove();
        } else {
            preview.src = "";
        }

        uploadBtnChange(file, compressValue);
    }


       // 发布游记
        function reportTravels(imgUrl) {
            var travelTitle = $("#travel_title").val();
            var travelContent = $("#travel_content").val();
            var travelType = $("#travel_type").val();
            if (travelTitle.length != 0 && travelContent.length != 0 && travelType.length != 0 && userId) {
                //封装对象
                var travel = {};
                travel.travelCreator = userId;
                travel.travelTitle = travelTitle;
                travel.travelTypeId = travelType;
                travel.trsvelContent = travelContent;
                travel.travelImageAddress = imgUrl;

                $.ajax({
                    async: "true",
                    type: 'POST',
                    url: url + '/travels/create',
                    contentType: 'application/json;charset=utf-8',
                    dataType: 'json',
                    traditional: true,
                    data: JSON.stringify(travel),
                    success: function (result) {
                        if (result.error == 0) {
                            window.location.href = '../personCenter/person-view.html';
                        } else {
                            alert('游记发表失败');
                        }
                    },
                    error: function (xhr, type) {
                        alert('请求出错，再刷新试试');
                    }
                });
            } else {
                alert("不能发空游记哟");
            }
        }
    var imgUrl = "";
    var aaai;
    //将图片上传与游记发表在一个函数调用
    function upImgAndReportTravels() {


        if (value.length != 0) {
            var img;
            for (var i = 0; i < value.length; i++) {
               img= oneImgUp(value[i]);
                if (i == value.length - 1) {
                    imgUrl += img;
                } else {
                    imgUrl += img + ",";
                }

            }
           reportTravels(imgUrl);
        } else {
            reportTravels();
        }

    }
    //一张图片上传
    function oneImgUp(img) {
        var a;
        $.ajax({
            url: url + "/users/details/image-upload",
            type: "POST",
            data: {
                'image': img
            },
            dataType: 'json',
            async: false,//这里选择异步为false，那么这个程序执行到这里的时候会暂停，等待数据加载完成后才继续执行
            success: function (result) {
                console.log(result);
                if (result.error == 0) {
                    a = result.data;
                } else {
                    alert("上传头像出错，请重试");

                }
            },
            error: function () {
                alert('操作失败，请跟技术联系');

            }

        });
        return a;
    }
    function uploadBtnChange(file, compressValue) {
        if (window.File && window.FileReader && window.FileList && window.Blob) {
            //获取上传file
//                        var filefield = document.getElementById('fileToUpload'),
//                                file = filefield.files[0];
            var file = file;
            //获取用于存放压缩后图片base64编码
//            var compressValue = document.getElementById('compressValue');
            processfile(file, compressValue);

        } else {
            alert("此浏览器不完全支持压缩上传图片");
        }

    }

    function processfile(file, compressValue) {
        var reader = new FileReader();
        reader.onload = function (event) {
            var blob = new Blob([event.target.result]);
            window.URL = window.URL || window.webkitURL;
            var blobURL = window.URL.createObjectURL(blob);
            var image = new Image();
            image.src = blobURL;
            image.onload = function () {
                var resized = resizeMe(image);
                compressValue.value = resized;
                //将各张图片压缩后的64位编码放入value数组
                value.push(resized);
            }
        };
        reader.readAsArrayBuffer(file);
    }

    function resizeMe(img) {
        //压缩的大小
        var max_width = 350;
        var max_height = 350;

        var canvas = document.createElement('canvas');
        var width = img.width;
        var height = img.height;
//        if(width > height) {
//            if(width > max_width) {
//                height = Math.round(height *= max_width / width);
//                width = max_width;
//            }
//        }else{
//            if(height > max_height) {
//                width = Math.round(width *= max_height / height);
//                height = max_height;
//            }
//        }
        width = max_width;
        height = max_height;

        canvas.width = width;
        canvas.height = height;

        var ctx = canvas.getContext("2d");
        ctx.drawImage(img, 0, 0, width, height);
        //压缩率
        return canvas.toDataURL("image/jpeg", 0.92);
    }


</script>
</html>